<template>
	<div class="Tabs">
		<div class="swiper Tabs-swiper">
			<ol class="Tabs swiper-wrapper">
				<li v-for="item in tabslist " :key="item.id" class="swiper-slide">
					<router-link to="/">
						<img :src="item.img" />
						<p>{{item.txt}}</p>
					</router-link>
				</li>
			</ol>
		</div>
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	
	export default{
		name:'Tabs',
		data(){
			return{
				tabslist:[
					{id:1,img:'images/1_03.png',txt:'景点导航'},
					{id:2,img:'images/2_06.png',txt:'购物'},
					{id:3,img:'images/3_03.png',txt:'景点打卡'},
					{id:4,img:'images/4_03.png',txt:'攻略'},
					{id:5,img:'images/5_06.png',txt:'风情民宿'},
					{id:6,img:'images/6_03.png',txt:'美食'},
					{id:7,img:'images/7_06.png',txt:'猫眼影院'},
					{id:8,img:'images/8_11.png',txt:'出行服务'},
					{id:9,img:'images/9_15.png',txt:'收藏'},
					{id:10,img:'images/10_18.png',txt:'旅游贷'},
					{id:11,img:'images/11_13.png',txt:'租车服务'},
					{id:12,img:'images/12_21.png',txt:'驴友'}
				]
			}
		},
		setup() {
			onMounted(() => {
				new Swiper('.Tabs-swiper', {
					slidesPerView:5
				})
			})
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.Tabs{
		display: flex;
		align-items: center;
		padding: 0.3rem 0;
	}
	.Tabs li{
		width: 20%;
		text-align: center;
	}
	.Tabs img{
		width: 0.8rem;
		height: 0.8rem;
	}
	.Tabs p{
		font-size: 2vw;
		padding: 0.2rem 0;
		
	}
</style>
